<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-popover="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>商品标签管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app" v-cloak>
    <!-- 页面头部 -->
    <div class="page-header">
        <h1 class="page-title">商品标签管理</h1>
        <div class="z-pop_question">
            <el-popover
                    ref="popoverq"
                    placement="bottom-start"
                    width="400"
                    trigger="hover">
                <p class="z-jiao">
                    1. 查看商品标签列表
                    2. 进行添加编辑删除
                    <a href="javascript:;">查看更多帮助</a>
                </p>
            </el-popover>
            <i v-popover:popoverq class="el-icon-question"></i>
        </div>
        <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>商品<span>/</span>商品标签管理</div>
    </div><!-- 页面头部 end -->
        <div class="list-content">
        <!--条件筛选-->
        <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
            <div class="input-select fl btn-radid_none">
                <div class="filter-form filter-form-one clearfix">
                    <el-input placeholder="标签名称" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
                </div>
                <div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>
                <div class="filter-operate">
                    <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                    <el-tooltip class="item" content="查询" placement="bottom-start">
                        <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" content="清空" placement="bottom-start">
                        <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                    </el-tooltip>
                </div>
            </div>
            <div class="filter-btn fr">
                <el-button type="primary" @click="showDailog">新增标签</el-button>
            </div>
        </div>

        <!--主体表格-->
        <div class="z-tables">
            <el-table ref="multipleTable" :data="tagList" style="width: 100%;">
                <el-table-column fixed label="序号" type="index" class-name="z-opt_btn"></el-table-column>
                <el-table-column prop="name" label="标签名称" min-width="120"></el-table-column>
                <el-table-column label="图标" min-width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.icon" width="50" height="50"/>
                    </template>
                </el-table-column>
                <el-table-column prop="position" label="标签排序" min-width="120"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="180" class-name="table-operate-td"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editDailog(scope.$index, scope.row)">编辑</el-button>
                        <span class="table-spea-line">|</span>
                        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="grid-content">
            <div class="bg-purple-light">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizeList"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next"
                        :total="totalNum">
                </el-pagination>
            </div>
        </div>
        <!-- 新增模态框 -->
        <el-dialog :title="openText" :visible.sync="dialogFormVisible">
            <el-form :model="tag" :rules="rules" ref="tag-form" label-width="100px" class="demo-ruleForm el-input-95">
                <el-form-item hidden label="ID" prop="uuid">
                    <el-input v-model="tag.uuid"></el-input>
                </el-form-item>
                <el-form-item label="标签名称" prop="name">
                    <el-input v-model="tag.name"></el-input>
                </el-form-item>
                <el-form-item label="标签图标" prop="icon">
                    <div class="upload-image-box" @click="dialogImageVisible = true" style="width:70px;height:70px;">
                        <div v-show="uploadImage.imageUrl" class="upload-image">
                            <img :src="uploadImage.imageUrl">
                            <span class="upload-operate upload-operate-delect" @click.stop="handleRemove">点击删除</span>
                        </div>
                        <span v-show="!uploadImage.imageUrl" class="upload-button">
							<i class="el-icon-upload"></i>
							添加图片
						</span>
                    </div>
                </el-form-item>
                <el-form-item label="排序" prop="position">
                    <el-input v-model="tag.position"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" id="addDialog" style="display: none">
                <el-button @click="save" type="primary">确定</el-button>
                <el-button @click="dislogHide">取消</el-button>
            </div>
            <div slot="footer" class="dialog-footer" id="editDialog" style="display: none">
                <el-button @click="update" type="primary">确定</el-button>
                <el-button @click="dislogHide">取消</el-button>
            </div>
        </el-dialog>
            <!-- 上传图片模态框 -->
            <el-dialog title="上传文件" :visible.sync="dialogImageVisible">
                <el-upload v-model="tag.icon"
                           ref="upload"
                           action="/fastdfs/file/uploadFile"
                           :multiple=false
                           :limit="1"
                           list-type="picture"
                           :file-list="fileList"
                           :on-success="dosuccess"
                           :on-remove="handleRemove"
                           :before-upload="beforeAvatarUpload">
                    <el-button size="medium">+&nbsp;点击选择图片</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
                </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogImageVisible = false">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 上传图片模态框 end -->
    </div>
</div>
</body>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            openText: "",
            activeName: 'first',
            dialogFormVisible: false,
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {
                "name": {
                    "operation": "EQ",
                    "value": undefined
                },
            },
            dialogVisible: false,
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            tag:{
                "icon":"",
                "name":"",
                "position":0
            },
            tagList:[],// 标签列表数据
            // 定义表单字段的校验规则
            rules: {
                name: [
                    {required: true, message: "请输入标签名称", trigger: 'blur'},
                    {min:2, max:20, message: '标签名称2到20个字符', trigger: 'blur'}
                ],
                icon: [
                    {required: true, message: "请上传图标", trigger: 'blur'},
                ],
                position: [
                    {required: true, message: "请输入排序号", trigger: 'blur'},
                    {
                        validator(rule, value, callback, source, options) {
                            var errors = [];
                            if (!/^[a-z0-9]+$/.test(value)) {
                                callback('此处必须为数字值');
                            }
                            callback(errors);
                        }
                    }
                ]
            },
            // 上传图片的相关变量
            dialogImageVisible: false,  // 上传图片模态框是否显示
            fileList:[],
            // 上传图片数据
            uploadImage: {
                imageUrl: '',
                fileList: []
            },
        },
        created: function () {
            this.queryList();
        },
        methods: {
            // 模态框处理函数
            dislogHide: function () {
                this.dialogFormVisible = false;
            },
            showDailog: function () {
                this.dialogFormVisible = true;
                this.openText = "新增菜品标签";
                $("#addDialog").css('display','block');
                $("#editDialog").css('display','none');
                this.tag.uuid = '';
                this.tag.name = '';
                this.tag.vendorUuid = '';
            },
            editDailog: function(index,row){
                this.dialogFormVisible = true;
                this.openText = "编辑菜品标签";
                $("#addDialog").css('display','none');
                $("#editDialog").css('display','block');
                this.tag = row;
                this.uploadImage.imageUrl = this.tag.icon;
            },
            // CUD处理函数
            save: function () {
                var self = this;
                self.$refs['tag-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cater/producttag/add",
                            type: "POST",
                            data: JSON.stringify(self.tag),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '新增菜品标签成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/producttag/tolist';
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: data.returnNote,
                                        type: 'error',
                                        duration: 2000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/producttag/tolist';
                                        }
                                    });
                                }
                            }
                        });
                    }
                });
            },
            update: function () {
                var self = this;
                self.$refs['tag-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cater/producttag/edit",
                            type: "POST",
                            data: JSON.stringify(self.tag),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '编辑菜品标签成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/producttag/tolist';
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: data.returnNote,
                                        type: 'error',
                                        duration: 2000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/producttag/tolist';
                                        }
                                    });
                                }
                            }
                        });
                    }
                });
            },
            // 删除
            handleDelete(index, row) {
                let self = this;
                self.$confirm('确认要删除此标签信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    $.ajax({
                    url: "/backstage/cater/producttag/delete",
                    type: "POST",
                    data: JSON.stringify([row.uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            self.$message({
                                message: '删除菜品标签成功',
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            self.handleQuery();
                        } else {
                            self.$message({
                                message: data.returnNote,
                                type: 'error',
                                customClass: 'message-center',
                                duration: 2000,
                            });
                        }
                    }
                });
            });
            },
            // 列表处理函数
            identityFormatter: function (row, column, cellValue, position) {
                for (let identity of this.identityList) {
                    if (identity.value === cellValue) {
                        return identity.name;
                    }
                }
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryList();
            },
            handleClear() {
                this.conditions.name.value = undefined;
            },
            handleCommand(command) {
                this.$message('click on item ' + command);
            },
            // 列表批量操作2-批量导出
            handleCommand2(command) {
                this.$message('click on item ' + command);
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            queryList() {
                app.loading = true;
                let queryMessage = {
                    "queryPage": this.currentPage,
                    "pageShow": this.pageSize,
                    "queryParams": this.conditions,
                    "sortMap": {
                        "position": "asc"
                    }
                };
                $.ajax({
                    url: "/backstage/cater/producttag/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            app.tagList = data.returnMessage;
                            app.totalNum = data.pager.totalNum;
                        }
                        app.loading = false;
                    }
                });
            },
            // 上传图片的相关函数
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 1;

                if (!isJPG) {
                    this.$message({
                        message: '分类图标只能是 JPG、PNG 格式!',
                        type: 'error',
                        customClass: 'message-center',
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        message: '分类图标大小不能超过 1MB!',
                        type: 'error',
                        customClass: 'message-center',
                    });
                }
                return isJPG && isLt2M;
            },
            dosuccess:function(response, file, fileList){
                this.tag.icon = response.fdfsIpPre + response.fullPath;
                this.fileName = file.name;
                this.uploadImage.imageUrl = response.fdfsIpPre + response.fullPath;
            },
            handleRemove:function(file, fileList){
                var self = this;
                $.post("/fastdfs/file/deleteFile",
                    {"fullPath":this.tag.icon},
                    function(data) {
                        var obj = eval('(' + data + ')');
                        if(obj.returnCode){
                            self.tag.icon = "";
                            self.uploadImage.imageUrl = "";
                            self.fileList=[];
                        }
                    }
                );
            },
        }
    });

</script>
</html>